<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>患者注册</title>
    <script src="../../js/common.js"></script>
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../css/patient/register.css">
</head>

<body>
    <div class="container">
        <div class="loginLogo">
            <img src="../../images/doctor/loginLogo.png" alt="">
            <p>患者手机绑定</p>
        </div>
        <div class="form">
            <form action="">
                <div class="userName clearfix">
                    <!-- <div class="fl icon">
                        <img src="../../images/doctor/userNameIcon.png" alt="">
                    </div> -->
                    <input type="number" placeholder="请输入登录手机号" class="fl" oninput="if(value.length>11)value=value.slice(0,11)" min="0" inputmode="numeric"
                        pattern="[0-9]*" id="userName">
                </div>
                <div class="userName clearfix msg">
                    <!-- <div class="fl icon">
                        <img src="../../images/doctor/lock.png" alt="">
                    </div> -->
                    <input type="text" placeholder="请输入您的验证码" class="fl" id="msgInput" maxlength="6">
                    <button type="button" class="msgButton fr">发送验证码</button>
                </div>
                <button type="button" class="nextBtn" id="nextBtn">下一步</button>
                <div class="pop por">
                    <div class="shadow"></div>
                    <div class="picContainer poa">
                        <p>请输入图形验证码</p>
                        <img src="../../images/patient/register/closeIcon.png" alt="" class="closeIcon">
                        <div class="picMsg clearfix">
                            <input type="text" placeholder="请输入" class="fl picInput" id="picInput" maxlength="4">
                            <img src="../../images/patient/register/pic.jpg" alt="" class="picImg fr">
                        </div>
                        <div class="tips">
                        </div>
                        <button type="button" class="confirmBtn" id="confirmBtn">确定</button>
                    </div>
                </div>
            </form>
            <div class="AlertBlock" id="AlertBlock"></div>
        </div>
        <div class="hrefLogin">
            <a href="login.html">我要登录</a>
        </div>
    </div>


</body>
<script src="../../js/jquery-1.11.3.min.js"></script>
<script>
     //点击获取验证码，弹出图形验证码弹窗
     $(".msgButton").click(function () {
          if ($("#userName").val() == "") {
             DoAlert("手机号码不能为空");
             return
         } else if (!(/^\S{1,}$/.test($("#userName").val()))) {
             DoAlert("请输入正确的手机号码");
             return
         }
         $(".pop").show();
         //进行图形验证码的验证
          $("#confirmBtn").click(function () {
             if ($("#picInput").val() == "") {
                 $(".tips").html("验证码不能为空");
                 return
             } else if (!(/^[0-9A-Za-z]{4}$/.test($("#picInput").val()))) {
                 $(".tips").html("请输入正确的图形验证码");
                 return
             }
           $(".pop").hide();
         })
     })
    //点击关闭按钮
    $(".closeIcon").click(function(){
        $(".pop").hide();
    })
    //点击下一步按钮，进行手机号和验证码的验证
    $(".nextBtn").click(function () {
        if ($("#userName").val() == "") {
            DoAlert("手机号码不能为空");
            return
        } else if (!(/^\S{1,}$/.test($("#userName").val()))) {
            DoAlert("请输入正确的手机号码");
            return
        }
        if ($("#msgInput").val() == "") {
            DoAlert("验证码不能为空");
            return
        } else if (!(/^\d{6}$/.test($("#msgInput").val()))) {
            DoAlert("请输入正确的短信验证码");
            return
        }
    })
</script>

</html>